<template>
  <!-- <div class="login-container">
    <div class="login-box">
      <div class="login-left">
        <img src="@/assets/image/login/side-logo2.png">
      </div>
      <div class="login-form">
        <LoginForm />
      </div>
    </div>
  </div> -->
  <div class="loginBox">
    <div class="loginForm">
      <LoginForm />
    </div>
  </div>
</template>

<script lang="ts" setup>
import LoginForm from './components/LoginForm.vue';
</script>
<style lang="scss" scoped>
@import "./index";

.loginBox {
  width: 100%;
  height: 100%;
  background-image: url('@/assets/image/login/side-logo2.png');
  background-position: center center;
  background-size: 100%;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;

  .loginForm {
    margin-right: 10%;
    max-width: 420px;
    width: 36%;
    height: 390px;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    box-sizing: border-box;
    // position: relative;
    background-color: #fff;
  }
}
</style>
